<template>
  <div class="imagesAll">
    <el-radio-group v-model="radio" @change="handleClickImage" size="mini">
      <el-radio-button label="0">白底图</el-radio-button>
      <el-radio-button label="1">设计图</el-radio-button>
      <el-radio-button label="2">成衣图</el-radio-button>
      <el-radio-button label="3">人台图</el-radio-button>
      <el-radio-button label="4">产品图</el-radio-button>
      <el-radio-button label="5">测量图</el-radio-button>
    </el-radio-group>
    <div class="imagesAll-img" v-if="images.length">
      <el-image
      v-for="item in images" :key="item"
        :src="item"
        fit="contain"
        :preview-src-list="images"
      ></el-image>
    </div>
    <div v-else style="margin-top:10px">
      暂无数据
    </div>
  </div>
</template>

<script>
import { postAdminOperateGetStyleImgList } from "@/api"
export default {
  props:{
    id:"",
    jy_img:[]
  },
  data() {
    return {
      radio: "1",
      images:[]
    };
  },
  mounted(){
    this.handleClickImage(1)
  },
  methods:{
    async handleClickImage(groups){
      if(groups==0){
        this.images = this.jy_img
      }else{
        let obj = {
        id:this.id,
        groups:groups
      }
      let res = await postAdminOperateGetStyleImgList(obj)
      this.images = res.data.img
      }
      
    }
  }
};
</script>

<style lang="scss" scoped>
.imagesAll {
  padding: 10px;
  .imagesAll-img{
    display: flex;
    flex-wrap: wrap;
    /deep/ .el-image{
      margin-top:10px;
      margin-right: 10px;
      border:1px solid #efefef;
      width: 140px;
      height: 140px;
    }
  }
}
</style>